<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>props 函数式组件</title>
    </head>
    <body>
        <div id="root"></div>

        <script src="../js/react.development.js"></script>
        <script src="../js/react-dom.development.js"></script>
        <script src="../js/babel.min.js"></script>
        <!-- 1. 引入 prop-types.js -->
        <script src="../js/prop-types.js"></script>
        <script type="text/babel">
            let stu = {
                name: "微微",
                age: 18,
                gender: "女",
            };
            let stu2 = {
                age: 19, gender: '男'
            }

            //代码分隔符  ;  换行
            function Xuesheng(props) {
                let {name, age, gender} = props;
                return (
                    <div>
                        <h2>学员信息</h2>
                        <ul>
                            <li>姓名: {name}</li>
                            <li>性别: {gender}</li>
                            <li>年龄: {age}</li>
                        </ul>
                    </div>
                    )
            }
            // 2. 为类添加属性   写法等效于 class Xuesheng{ static PropTypes={} }
            Xuesheng.propTypes = {
                name: PropTypes.string,
                age: PropTypes.number,
                gender: PropTypes.string
            }

            //属性默认值的设置
            Xuesheng.defaultProps = {
                name: '张三'
            }

            ReactDOM.render(
                <div>
                    <Xuesheng name={stu.name} age={stu.age} gender={stu.gender} />
                    <Xuesheng {...stu2} />
                </div>
            , document.querySelector("#root"));
        </script>
    </body>
</html>
